<template>
  <view class="home">
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
    >
      <swiper-item v-for="(item, index) in swipers" :key="index">
        <view class="swiper-item">
          <image :src="item.img" mode="widthFix"></image>
        </view>
      </swiper-item>
    </swiper>
	<!-- 导航 -->
    <view class="nav">
      <view class="nav-item" v-for="(item,index) in navData" :key='index' @click="navItemClick(item.path)">
        <view class="iconfont" :class="item.icon"></view>
        <text>{{item.title}}</text>
      </view>
    </view>
	<view class="hot-goods">
	   <view class="title">推荐商品</view>
	   <goods-list :goods='hotGoods'></goods-list>
    </view>
  </view>
</template>

<script>
import goodsList from '../../components/goodsList/goodsList.vue'
export default {
  data() {
    return {
      swipers: [],
	  hotGoods:[],
	  navData:[
		  {icon:'icon-ziyuan',title:'黑马超市',path:'/pages/goods/goods'},
		  {icon:'icon-guanyuwomen',title:'联系我们',path:'/pages/contact/contact'},
		  {icon:'icon-tupian',title:'社区图片',path:'/pages/pics/pics'},
		  {icon:'icon-shipin',title:'学习视频',path:'/pages/videos/videos'},
	  ],
    };
  },
  components:{
	  "goods-list":goodsList
  },
  onLoad() {
    this.getData();
	this.getHotGoods()
  },
  methods: {
	  //获取轮播图数据
    async getData() {
      const res = await this.$http({ url: "/api/getlunbo" });
      this.swipers = res.data.message;
    },
	//获取热门商品数据
	async getHotGoods(){
		const res = await this.$http({url:"/api/getgoods?pageindex=1"})
		this.hotGoods = res.data.message;
	},
	navItemClick(path){
		uni.navigateTo({
			url:path
		})
	}
  },
};
</script>

<style lang="scss">
.home {
  swiper {
    width: 750rpx;
    height: 380rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .nav {
    display: flex;
    .nav-item {
      width: 25%;
      text-align: center;
      view {
        height: 120rpx;
        width: 120rpx;
        background-color: $shop-color;
        color: #fff;
        border-radius: 50%;
        margin: 10rpx auto;
        line-height: 120rpx;
        font-size: 50rpx;
      }
      .icon-tupian {
        font-size: 40rpx;
      }
      text {
        font-size: 30rpx;
      }
    }
  }
  .hot-goods {
    color: $shop-color;
    background: #eee;
    overflow: hidden;
    margin-top: 20rpx;
    .title {
      background: #fff;
      text-align: center;
      line-height: 100rpx;
      letter-spacing: 20rpx;
      font-size: 40rpx;
      margin: 10rpx 0;
    }
	
  }
}
</style>
